import React, { Component } from 'react'
import styles from './index.less'
import { Table, Icon, Input, Button, Modal, Divider, DatePicker } from 'antd';
import { connect } from 'dva'
import moment from 'moment';
moment.locale('zh-cn');

@connect(({ smsReply, loading }) => ({ 
    smsReplyList: smsReply.smsReplyList,
    smsReplyListPage: smsReply.smsReplyListPage,
    smsReplyListTotal: smsReply.smsReplyListTotal,
    fetchSelSmsReplyAllLoading: loading.effects['smsReply/fetchSelSmsReplyAll'],
}))

export default class SmsReplyView extends Component {
    columns = [{
        title: '电话号',
        dataIndex: 'telNum',
        key: 'telNum',
      },{
        title: '内容',
        dataIndex: 'replyMsg',
        key: 'replyMsg',
        render: (context) =>{
            if(!context){
                return context
            }
            if(context.length>10){
                return context.substring(0,10)
            }
            return context
        }
      },{
        title: '目标号码',
        dataIndex: 'destnationId',
        key: 'destnationId',
      },{
        title: '接收时间',
        dataIndex: 'replyTime',
        key: 'replyTime',
        render: (replyTime, record) =>{
            if(replyTime){
                return moment(replyTime).format('YYYY-MM-DD HH:mm:ss');
            }
        }
      }];

    state = {
        telNum: '',
    }

    setPage = (e) =>{
        const { dispatch } = this.props
        const {
            telNum, 
        } = this.state
        dispatch({
            type: 'smsReply/fetchSelSmsReplyAll',
            payload: {
                page: e,
                telNum: telNum,
            }
        })
    }

    onChangeTelNum = (e)=>{
        this.setState({
            telNum: e.target.value
        })

    }

    render() {
        const { telNum } = this.state
        const { dispatch, smsReplyList, smsReplyListPage, fetchSelSmsReplyAllLoading, smsReplyListTotal } = this.props
        console.log(smsReplyList)
        return (
            <div>
                <div className = {styles.query}>
                    <div className = {styles.search}>
                        <Input
                            className = {styles.input}
                            placeholder="电话号"
                            prefix={<Icon type="profile" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            onChange={this.onChangeTelNum}
                        />
                        <Button 
                            className = {styles.btn}
                            type="primary"
                            onClick = {()=>{
                                const { dispatch } = this.props
                                const {
                                    telNum,
                                } = this.state
                                dispatch({
                                    type: 'smsReply/fetchSelSmsReplyAll',
                                    payload: {
                                        page: 1,
                                        telNum: telNum,
                                    }
                                })
                            }}>查询</Button>
                    </div>
                </div>
                <Divider />
                <div className = {styles.content}>
                    <Table 
                        loading={fetchSelSmsReplyAllLoading}
                        columns={this.columns} 
                        dataSource={smsReplyList}
                        pagination = {{
                            current: smsReplyListPage,
                            total: smsReplyListTotal,
                            onChange: this.setPage
                        }} />
                </div>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'smsReply/fetchSelSmsReplyAll',
            payload: {page: this.props.smsReplyListPage}
        })
    }

}
